<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">用户列表</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">用户列表</li>
                    </ul>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">用户列表</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <div class="table-responsive">
                                <div class="row justify-content-between">
                                    <div class="col-sm-12 col-md-6">
                                        <div id="user_list_datatable_info" class="dataTables_filter">
                                            <form class="mr-3 position-relative">
                                                <div class="form-group mb-0">
                                                    <input type="search" class="form-control" id="exampleInputSearch"
                                                           placeholder="搜索" aria-controls="user-list-table">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div class="user-list-files d-flex float-right">
                                            <a href="javascript:void(1);" class="chat-icon-video">
                                                导出为Excel
                                            </a>
                                            <a href="javascript:void(2);" class="chat-icon-delete">
                                                导出为Pdf
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <table id="user-list-table" class="table table-striped table-bordered mt-4" role="grid"
                                       aria-describedby="user-list-page-info">
                                    <thead>
                                    <tr>
                                        <th>头像</th>
                                        <th>名称</th>
                                        <th>联系</th>
                                        <th>电子邮件</th>
                                        <th>国家</th>
                                        <th>状态</th>
                                        <th>公司</th>
                                        <th>加入日期</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="text-center"><img class="rounded-circle img-fluid avatar-40"
                                                                     src="../src/images/user/04.jpg" alt="profile"></td>
                                        <td>张三</td>
                                        <td>+86 15156987456</td>
                                        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"
                                               data-cfemail="99f1f8f7eaf6f5f6d9fef4f8f0f5b7faf6f4">2548759854@qq.com</a>
                                        </td>
                                        <td>中国</td>
                                        <td><span class="badge iq-bg-danger">无活动</span></td>
                                        <td>激烈的资本</td>
                                        <td>2019/12/01</td>
                                        <td>
                                            <div class="flex align-items-center list-user-action">
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="添加" href="#"><i
                                                        class="ri-user-add-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="编辑" href="#"><i
                                                        class="ri-pencil-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="删除" href="#"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><img class="rounded-circle img-fluid avatar-40"
                                                                     src="../src/images/user/05.jpg" alt="profile"></td>
                                        <td>李四</td>
                                        <td>+27 2563 456 589</td>
                                        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"
                                               data-cfemail="5c302532323b293532351c3b313d3530723f3331">254145896@qq.com</a>
                                        </td>
                                        <td>非洲</td>
                                        <td><span class="badge iq-bg-primary">活跃</span></td>
                                        <td>大规模动态</td>
                                        <td>2019/12/01</td>
                                        <td>
                                            <div class="flex align-items-center list-user-action">
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="添加" href="#"><i
                                                        class="ri-user-add-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="编辑" href="#"><i
                                                        class="ri-pencil-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="删除" href="#"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><img class="rounded-circle img-fluid avatar-40"
                                                                     src="../src/images/user/06.jpg" alt="profile"></td>
                                        <td>王五</td>
                                        <td>+55 25685 256 589</td>
                                        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"
                                               data-cfemail="7712051e14041f021937101a161e1b5914181a">24514895@qq.com</a>
                                        </td>
                                        <td>巴西</td>
                                        <td><span class="badge iq-bg-warning">悬而未决</span></td>
                                        <td>环球公司</td>
                                        <td>2019/12/01</td>
                                        <td>
                                            <div class="flex align-items-center list-user-action">
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="添加" href="#"><i
                                                        class="ri-user-add-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="编辑" href="#"><i
                                                        class="ri-pencil-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="删除" href="#"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><img class="rounded-circle img-fluid avatar-40"
                                                                     src="../src/images/user/07.jpg" alt="profile"></td>
                                        <td>赵六</td>
                                        <td>(760) 765 2658</td>
                                        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"
                                               data-cfemail="92f0e7f6e5fbe1f7e0d2ebfff3fbfebcf1fdff">448154848@dwq.com</a>
                                        </td>
                                        <td>美国</td>
                                        <td><span class="badge iq-bg-info">保持</span></td>
                                        <td>Acme公司</td>
                                        <td>2019/12/01</td>
                                        <td>
                                            <div class="flex align-items-center list-user-action">
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="添加" href="#"><i
                                                        class="ri-user-add-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="编辑" href="#"><i
                                                        class="ri-pencil-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="删除" href="#"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><img class="rounded-circle img-fluid avatar-40"
                                                                     src="../src/images/user/08.jpg" alt="profile"></td>
                                        <td>杨琪</td>
                                        <td>+27 5625 456 589</td>
                                        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__"
                                               data-cfemail="9af7fbe8fdfffbe8f3eefbdafdf7fbf3f6b4f9f5f7">1541654@qq.com</a>
                                        </td>
                                        <td>非洲</td>
                                        <td><span class="badge iq-bg-success">完成</span></td>
                                        <td>威特资本</td>
                                        <td>2019/12/01</td>
                                        <td>
                                            <div class="flex align-items-center list-user-action">
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="添加" href="#"><i
                                                        class="ri-user-add-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="编辑" href="#"><i
                                                        class="ri-pencil-line"></i></a>
                                                <a data-toggle="tooltip" data-placement="top" title=""
                                                   data-original-title="删除" href="#"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row justify-content-between mt-3">
                                <div id="user-list-page-info" class="col-md-6">
                                    <span>共15个用户&nbsp;&nbsp;&nbsp;当前显示第 1 页</span>
                                </div>
                                <div class="col-md-6">
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination justify-content-end mb-0">
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true"">上一页</a>
                                            </li>
                                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">下一页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<div id="bottom"></div>
<!-- Footer END -->
</body> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
</script>
</html>